// 积分首页组件 
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Row, Col, Typography, Spin, Empty, Button } from 'antd';
import { HistoryOutlined } from '@ant-design/icons';
import MainLayout from '../../../components/MainLayout';
import PointsOverview from './components/PointsOverview';
import NetworkCard from './components/NetworkCard';
import Toast from '../../../components/Toast';
import pointsService from '../../../services/points';
import networkService from '../../../services/network';
import './PointsHome.css';

const { Title } = Typography;

const PointsHome = () => {
  const navigate = useNavigate();
  // 状态管理
  const [pointsBalance, setPointsBalance] = useState(0);
  const [joinedNetworks, setJoinedNetworks] = useState([]);
  const [pointsLoading, setPointsLoading] = useState(true);
  const [networksLoading, setNetworksLoading] = useState(true);
  const [showToast, setShowToast] = useState(false);
  const [toastMessage, setToastMessage] = useState('');

  const showToastMessage = (message) => {
    setToastMessage(message);
    setShowToast(true);
  };

  // 获取积分余额
  const fetchPointsBalance = async () => {
    try {
      setPointsLoading(true);
      const response = await pointsService.getPointsBalance();
      if (response.data.code === 200) {
        setPointsBalance(response.data.data.pointsBalance || 0);
      } else {
        showToastMessage('获取积分余额失败');
      }
    } catch (error) {
      showToastMessage('获取积分余额失败');
    } finally {
      setPointsLoading(false);
    }
  };

  // 获取加入的网络列表
  const fetchJoinedNetworks = async () => {
    try {
      setNetworksLoading(true);
      const response = await networkService.getUserNetworks('joined');
      if (response.data.code === 200) {
        setJoinedNetworks(response.data.data || []);
      } else {
        showToastMessage('获取网络列表失败');
      }
    } catch (error) {
      showToastMessage('获取网络列表失败');
    } finally {
      setNetworksLoading(false);
    }
  };

  // 初始化数据
  useEffect(() => {
    fetchPointsBalance();
    fetchJoinedNetworks();
  }, []);

  // 跳转到积分历史页面
  const handleViewHistory = () => {
    navigate('/points/history');
  };

  return (
    <MainLayout>
      <div className="points-home-container">
        {/* 页面标题 */}
        <div style={{ 
          display: 'flex', 
          justifyContent: 'space-between', 
          alignItems: 'center',
          marginBottom: '24px',
          padding: '0 4px'
        }}>
          <Title level={2} style={{ margin: 0, color: '#1890ff' }}>
            积分系统
          </Title>
          <Button 
            type="primary" 
            icon={<HistoryOutlined />}
            onClick={handleViewHistory}
            style={{
              borderRadius: '8px',
              boxShadow: '0 2px 8px rgba(24, 144, 255, 0.3)'
            }}
          >
            积分历史
          </Button>
        </div>

        {/* 积分概览 */}
        <div className="points-overview-section">
          <PointsOverview 
            pointsBalance={pointsBalance} 
            loading={pointsLoading} 
          />
        </div>

        {/* 网络列表 */}
        <div className="networks-section">
          <div className="section-header">
            <Title level={3}>我的网络</Title>
            <p style={{ color: '#666' }}>
              点击"积分"按钮查看各网络的传输统计和积分详情
            </p>
          </div>

          {networksLoading ? (
            <div className="loading-container">
              <Spin size="large" />
              <p>加载网络列表中...</p>
            </div>
          ) : joinedNetworks.length > 0 ? (
            <Row gutter={[24, 24]}>
              {joinedNetworks.map(network => (
                <Col xs={24} sm={12} lg={8} key={network.networkId}>
                  <NetworkCard network={network} />
                </Col>
              ))}
            </Row>
          ) : (
            <div className="empty-networks">
              <p style={{ color: '#999', textAlign: 'center', fontSize: '16px' }}>
                您还没有加入任何网络
              </p>
            </div>
          )}
        </div>

        {showToast && (
          <Toast 
            message={toastMessage} 
            onClose={() => setShowToast(false)} 
          />
        )}
      </div>
    </MainLayout>
  );
};

export default PointsHome; 